<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>研究区域选择</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
    <style>
    #mapid { height: 400px; }
    .module {
        background-color: #f0f0f0; /* 浅灰色背景 */
        padding: 20px;
        margin-bottom: 20px;
        color: #333; /* 深灰色文字 */
    }
    .module label, .module input {
        display: block;
        margin-bottom: 10px;
        color: #333; /* 深灰色文字 */
    }
    .module input[type="text"] {
        background-color: #fff; /* 白色背景 */
        color: #333; /* 深灰色文字 */
        border: 1px solid #ccc; /* 浅灰色边框 */
    }
</style>
</head>
<body>

<div id="mapid"></div>

<div class="module">
    <label for="latTopLeft">左上角 纬度:</label>
    <input type="text" id="latTopLeft" name="latTopLeft">

    <label for="lngTopLeft">左上角 经度:</label>
    <input type="text" id="lngTopLeft" name="lngTopLeft">

    <label for="latBottomRight">右下角 纬度:</label>
    <input type="text" id="latBottomRight" name="latBottomRight">

    <label for="lngBottomRight">右下角 经度:</label>
    <input type="text" id="lngBottomRight" name="lngBottomRight">
</div>

<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<script>
    // 初始化地图
    var mymap = L.map('mapid').setView([51.505, -0.09], 13);

    // 添加图层
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19,
        attribution: '© OpenStreetMap'
    }).addTo(mymap);

    // 全局变量，用于存储矩形
    var rectangle;

    // 绘制矩形的函数
    function drawRectangle() {
        var latTopLeft = document.getElementById("latTopLeft").value;
        var lngTopLeft = document.getElementById("lngTopLeft").value;
        var latBottomRight = document.getElementById("latBottomRight").value;
        var lngBottomRight = document.getElementById("lngBottomRight").value;

        // 创建矩形的坐标点
        var topLeft = L.latLng(latTopLeft, lngTopLeft);
        var bottomRight = L.latLng(latBottomRight, lngBottomRight);

        // 清除之前的矩形
        if (rectangle) {
            mymap.removeLayer(rectangle);
        }

        // 绘制新的矩形
        rectangle = L.rectangle([topLeft, bottomRight], {color: "#ff7800", weight: 1}).addTo(mymap);
    }

    // 绑定表单输入框的事件，当输入完成后自动绘制区域
    document.getElementById('latTopLeft').addEventListener('input', drawRectangle);
    document.getElementById('lngTopLeft').addEventListener('input', drawRectangle);
    document.getElementById('latBottomRight').addEventListener('input', drawRectangle);
    document.getElementById('lngBottomRight').addEventListener('input', drawRectangle);
</script>

</body>
</html>